<template>
	<view>
		<view class="statbar"></view>
		<u-navbar title="观看历史" :autoBack="true" :rightText="rightText" @rightClick="rightClick">
		</u-navbar>

		<view style="margin-top: 50px;">
			<view v-for="(item,index) in vodList" style="clear: both;">

				<view style="height: 120px;margin: 10px;clear: both;display: flex;flex-direction: row;">
					<view style="float: left;margin-top: 50px;width: 15px;margin-right: 15px ;"
						@click="check(item,index)" v-if="isEdit">
						<check-box ref="box" :key="keys" :check="item.checked"></check-box>
					</view>

					<view @click="toDetail(item)">
						<image class="cover" :src="item.vodPic"></image>
					</view>
					<view class="desc" @click="toDetail(item)">
						<view class="txt">{{item.vodName}} {{item.seriesName}}</view>
						<view class="subTxt" v-if="item.spareTime>120">剩余{{spareTime(item.spareTime)}}未看</view>
						<view class="subTxt" v-else>已看完</view>

					</view>

				</view>
			</view>
			<view style="clear: both;margin: 30px;">
				<u-loadmore :status="status" :line="isShowLine" :nomoreText="nomoreText" loadingIcon="spinner" />
			</view>
			<view class="wrap" v-if="!isEdit">
				<u-back-top :scrollTop="scrollTop"></u-back-top>
			</view>
			<view class="info position-sticky fixed-bottom" v-if="isEdit">
					<u-button size="small" shape="circle" style="width: 100px;" type="primary" :text="selectTxt"
						@click="checkAll"></u-button>
					<u-button size="small" shape="circle" style="width: 100px;" type="error" text="删除"
						@click="deleteCheck"></u-button>
			</view>
			<u-toast ref="uToast"></u-toast>
			<u-modal :show="deleteConfirmShow" :showCancelButton="true" title="提示" content="   此操作将永久删除该观看历史, 是否继续?"
				@confirm="confirmDelete" ref="uModal" @cancel="deleteConfirmShow=false"></u-modal>

		</view>
	</view>
</template>

<script>
	import {
		getVodSearch
	} from '../../config/api.js';
	import checkbox from '@/components/checkbox/checkbox.vue'
	export default {
		components: {
			'check-box': checkbox
		},
		data() {
			return {
				// 基本案列数据
				checkBtnHeight:0,
				deleteConfirmShow: false,
				scrollTop: 0,
				selectTxt: '全选',
				rightText: '编辑',
				isEdit: false,
				keys: 0,
				showBorder: false,
				current: 1,
				totalPages: 0,
				vodList: [],
				refreshVodList: [],
				isShowLine: false,
				status: 'loadmore',
				nomoreText: '',
				keyword: ''
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					let height = res.windowHeight - uni.upx2px(100) //获取系统信息，可使用窗口的高度
					this.checkBtnHeight = height-20;
				}
			});
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if (this.current >= this.totalPages) return;
			this.status = 'loading';
			this.current = ++this.current;
			var that = this
			setTimeout(() => {
				if (that.current >= that.totalPages) {
					that.status = 'nomore';
				} else {
					that.status = 'loading';
					that.isShowLine = false;
				}
				that.findVodPage();
				that.vodList = that.vodList.concat(that.refreshVodList)

			}, 10)
		},

		created() {
			this.initCacheVodInfo();
		},
		methods: {
			toDetail(item) {
				if (this.isEdit) {
					item.checked = !item.checked
					this.keys = this.keys == 1 ? 0 : 1;
					return
				}
				if(uni.getStorageSync('playerSet') == 1){
					uni.$u.route({
						url: 'pages/dplayer/dplayer',
						params: {
						vodId: item.vodId,
						isHistory: true
						}
					})
				}else{
					uni.$u.route({
						url: 'pages/detail/detail',
						params: {
						vodId: item.vodId,
						isHistory: true
						}
					})
				}
			},
			findVodPage() {
				this.isShowLine = false;
				var that = this
				// get请求
				getVodSearch("?current=" + that.current + "&size=15&keyword=" + this.keyword).then((res) => {
					that.totalPages = res.pages;
					that.refreshVodList = res.records;
					if (that.current == 1) {
						that.vodList = res.records;
					}

					if (that.current >= that.totalPages) {
						setTimeout(() => {
							that.status = 'nomore';
							that.nomoreText = "没有更多数据了"
							that.isShowLine = true;
						}, 10);
					}

				}).catch(() => {

				})
			},
			initCacheVodInfo() {
				try {
					this.vodList = uni.getStorageSync('videoHistory')
					if (!this.vodList) {
						this.vodList = [];
					}
					//this.vodList=[{"vodId":"2","gDuration":2946.280029,"timeStorage":1711,"vodPic":"http://img.dm3.im/upload/vod/20211225-1/aac4952bbbfb30333de209ff5dc13de7.jpg"},{"vodId":"3","gDuration":2946.280029,"timeStorage":1711,"vodPic":"http://img.dm3.im/upload/vod/20211225-1/aac4952bbbfb30333de209ff5dc13de7.jpg"}]

					this.vodList.forEach((item) => {
						item.checked = false;
					})
					this.vodList = this.vodList;
					console.log(this.vodList)
					setTimeout(() => {
						this.status = 'nomore';
						this.nomoreText = "没有更多数据了"
						this.isShowLine = true;
					}, 10);
				} catch (error) {
					console.log('error', error)
				}
			},
			formatSeconds(a, type) {
				var hh = parseInt(a / 3600);
				var mm = parseInt((a - hh * 3600) / 60);
				if (mm < 10) mm = "0" + mm;
				var ss = parseInt((a - hh * 3600) % 60);
				if (ss < 10) ss = "0" + ss;
				if (hh < 10) hh = hh == '0' ? '' : `0${hh}:`;
				var length = hh + mm + ":" + ss;
				if (a >= 0) {
					return length;
				} else {
					return "00:00";
				}
			},
			spareTime(item) {
				return this.formatSeconds(item)
			},
			check(item, index) {
				item.checked = !item.checked;
				this.keys = this.keys == 1 ? 0 : 1;
			},
			rightClick() {
				if (this.rightText == '编辑') {
					this.isEdit = true
					this.rightText = "取消"
				} else {
					this.isEdit = false
					this.rightText = "编辑"
				}

			},
			checkAll() {
				if (this.selectTxt == '全选') {
					this.vodList.forEach((item) => {
						item.checked = true
					})
					this.selectTxt = '取消全选'
				} else {
					this.vodList.forEach((item) => {
						item.checked = false
					})
					this.selectTxt = '全选'
				}
			},
			deleteCheck() {
				const idx = this.vodList.findIndex(item => item.checked == true);
				if (idx == -1) {
					this.$refs.uToast.show({
						type: 'warnning',
						message: "请先选中删除的数据"
					})
					return
				}

				this.deleteConfirmShow = true


			},
			confirmDelete() {
				this.deleteConfirmShow = false

				let videoHistory = uni.getStorageSync('videoHistory')
				console.log(videoHistory.length)
				for (var i = 0; i < this.vodList.length; i++) {
					if (this.vodList[i].checked) {
						const idx = videoHistory.findIndex(item => item.vodId === this.vodList[i].vodId);
						if (idx != -1) {
							videoHistory.splice(videoHistory[idx], 1);
						}
						this.vodList.splice(i, 1); // 将使后面的元素依次前移，数组长度减1

						i--; // 如果不减，将漏掉一个元素
					}
				}
				console.log(videoHistory.length)

				uni.setStorage({
					key: 'videoHistory',
					data: videoHistory,
					success: function() {
						console.log('success')
					}
				})
				this.$refs.uToast.show({
					type: 'success',
					message: "删除成功"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.statbar {
		height: var(--status-bar-height);
		background: #F8F8F8;
	}

	.wrap {
		height: 10px;
	}

	.cover {
		width: 85px;
		height: 120px;
		border-radius: 2px;
		position: relative;
	}

	.renew {
		position: relative;
		color: #FFFFFF;
		font-size: 12px;
		top: -30px;
		text-align: right;
		right: 10px;
	}

	.desc {
		display: flex;
		flex-direction: column;
		margin: 20px 5px 5px 5px;
		
	}

	.tag {
		text-align: center;
		vertical-align: middle;
		margin: 5px;
		width: 40px;
		line-height: 16px;
		font-size: 10px;
		color: #ffffff;
		float: left;
		background-color: #909399;
	}

	.txt {
		padding-left: 5px;
		font-size: 14px;
		margin-bottom: 10px;	
	}

	.subTxt {
		color: #00AAFF;
		clear: both;
		font-size: 12px;
		padding: 0 5px 0 5px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}


	.btn {
		margin-top: 10px;
		width: 50px;
		position: absolute;
		left: 125px;
	}

	/deep/ .u-navbar__content__right__text {
		font-size: 12px;
	}
	.position-sticky {
	    position: -webkit-sticky!important;
	    position: sticky!important;
	}
	    
	.fixed-bottom {
	    position: fixed;
	    right: 0;
	    bottom: calc( var(--window-bottom) + 3px);
	    left: 0;
	    z-index: 1030;
	    margin-bottom: 6;
		display: flex;
		flex-flow: row;
		justify-content:space-between;
		align-items: center;
		margin:10px;
		
	}
	
</style>
